import React, { useEffect } from 'react';
import { Dialog, Field, Form, Input, NumberPicker, Upload } from '@alifd/next';
import { useRequest } from 'ice';
import BrandService from '../../service';
import { beforeUpload } from '@/utils/ossutil';
import st from './index.module.scss';

interface Props {
  visible: boolean;
  row: BrandState.BrandItem;
  onRefresh: () => any;
  onClose: () => any;
}

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};

const FormItem = Form.Item;

const CreateDialog: React.FC<Props> = (props) => {
  const field = Field.useField([]);
  const { visible, row, onRefresh = () => { }, onClose } = props;

  const { request, loading } = useRequest<any, BrandState.BrandItem[]>(BrandService.createBrand, {
    manual: true,
    onSuccess: () => {
      onRefresh();
      onClose();
    },
  });

  useEffect(() => {
    if (visible && row.id) {
      field.setValues({
        ...row,
        logo: [
          {
            uid: 'logo',
            state: 'done',
            url: row.logo,
            downloadURL: row.logo,
            imgURL: row.logo,
          },
        ],
      });
    }
    if (!visible) {
      field.reset();
    }
  }, [visible]);

  const handleOk = () => {
    field.validate((errors, values: any): void => {
      if (errors) {
        return;
      }
      request({
        ...values,
        name: values?.name?.trim(),
        remark: values?.remark?.trim(),
        enable: row.enable || true,
        id: row.id,
        logo: values?.logo?.map(t => t.url).join(','),
      });
    });
  };

  const formatter = (res, file) => ({
    success: true,
    url: file.tempUrl,
  });

  return (
    <Dialog
      shouldUpdatePosition
      overflowScroll
      visible={visible}
      onClose={onClose}
      title={`${row.id ? '编辑' : '新增'}品牌`}
      style={{ width: 520 }}
      onOk={handleOk}
      onCancel={onClose}
      okProps={{ loading }}
    >
      <Form fullWidth labelAlign="left" field={field} {...formItemLayout} useLabelForErrorMessage>
        <FormItem label="品牌名称:" name="name" required>
          <Input placeholder="请输入" maxLength={20} />
        </FormItem>
        <FormItem
          name="logo"
          label="品牌LOGO:"
          help="请选择大小不超过5M的文件，支持png/jpg/jpeg/gif格式"
          required
        >
          <Upload.Card
            accept="image/png, image/jpg, image/jpeg, image/gif"
            limit={1}
            listType="card"
            withCredentials={false}
            beforeUpload={beforeUpload}
            formatter={formatter}
            useDataURL
          />
        </FormItem>
        <FormItem label="排序:" name="sort" format="number" required requiredMessage="必填">
          <NumberPicker hasTrigger={false} placeholder="请输入" style={{ width: '100%' }} min={0} />
        </FormItem>
        <FormItem label="品牌描述:" name="remark">
          <Input.TextArea placeholder="请输入" showLimitHint maxLength={100} />
        </FormItem>
      </Form>
    </Dialog>
  );
};

export default CreateDialog;
